<template>
    <div style="width:100%;display: flex;justify-content: space-between;">
        <div style="width: 60%;">
            <div class="teachercard">

                <div style="margin-bottom: 10px;" >
                    <el-tag>奖励名称:</el-tag>
                    {{ info.rewardName }}
                </div>
                <div style="margin-bottom: 10px;" >
                    <el-tag>奖励类别:</el-tag>
                    {{ info.rewardCategory }}
                </div>
                <div style="margin-bottom: 10px;" >
                    <el-tag>颁发单位:</el-tag>
                    {{ info.awardingUnit }}
                </div>
                <div style="margin-bottom: 10px;" >
                    <el-tag>获得日期:</el-tag>
                    {{ info.awardDate }}
                </div>
                <div style="margin-bottom: 10px;" >
                    <el-tag>奖励等级:</el-tag>
                    {{ info.rewardLevel }}
                </div>
                <div style="margin-bottom: 10px;" >
                    <el-tag>项目/课程名称:</el-tag>
                    {{ info.projectCourseName }}
                </div>
                <div style="margin-bottom: 10px;" >
                    <el-tag>奖励证书编号:</el-tag>
                    {{ info.rewardCertificateNumber }}
                </div>
             

                <div >
                    <el-tag>奖励内容/描述:</el-tag>
                <div class="textleft" v-html="info.rewardDescription"></div>
                </div>
            </div>
          
        </div>
        <div style="width: 38%;">

            <div class="teachercard">
                <div style="width: 150px;height: 150px;margin: 0 auto;">
                    <img :src="user.icon" style="width: 100%;height: 100%;border-radius: 50%;" alt="">
                </div>
                <div style="text-align: center;margin-top: 20px;">{{ info.createBy }}</div>
            </div>
            <div class="teachercard" style="margin-top: 20px;">
                <h2>分类</h2>
                <el-tag> {{info.rewardCategory}}</el-tag>
            </div>
            <div class="teachercard fujian" style="margin-top: 20px;">

<el-button type="primary" size="small" @click="xzfj">下载附件</el-button>
</div>
        </div>
    </div>
</template>
<style scoped>
.fujian {
    width: 100%;
    display: flex;
}

.textleft {

    text-align: left;
    padding-left: 40px;
    font-size: 20px;
    box-sizing: border-box;
}

.username {
    text-align: center;
    box-sizing: border-box;
    font-size: 20px;
    margin-bottom: 20px;
}

.avatar {
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

.avatar img {
    width: 100%;
    height: 100%;

}
</style>
<script>
import service from '@/request'

export default {
    data() {
        return {
            info: {},
            user:{},
        }
    },
    mounted() {
        this.getlist()
        this.getinfo()
    },
    methods: {
        async xzfj() {
            const res = await service.get("/achievement/teachingRewards/download/" + this.info.id, { responseType: "blob" });
            console.log(res)
            window.location.href=this.info.relatedProofMaterials
        },
        
        async getinfo() {
           
        },
        async getlist() {

            const ress = await service.get("/achievement/teachingRewards/" + this.$route.query.id);
            console.log(ress)
            this.info = ress.data
          
            const ress1 = await service.get("/sys/user/" + this.info.userId);
            console.log(ress)
            this.user = ress1.data
            
        }
    }
}
</script>
<style scoped>
.teachercard {
    width: 100%;
    height: auto;
    background: #fff;
    padding: 20px;
    margin: 20px auto;

    box-sizing: border-box;
}
</style>